<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <!-- 环形进度条 -->
    <van-circle v-model:current-rate="count" :rate="count" :speed="100" :text="`拼团进度：${count}%`" :color="gradientColor"
      size="200">
    </van-circle>

    <!-- 倒计时 -->
    <van-count-down :time="time" />
  </div>


  <!-- 拼团商品 -->
  <van-card :thumb="team.product.thumbs_text" @click-thumb="toProductInfo(team.proid)">
    <template #title>
      <div class="title">{{ team.product.name }}</div>
    </template>

    <template #desc>
      <van-highlight :keywords="`${team.total}`" :source-string="`人数：${team.total} 人`" highlight-class="people" />
      拼团时间：{{ team.createtime_text }}(开始) ~ {{ team.endtime_text }}(结束)<br />
      拼团价格：￥{{ team.product.buy }}<br />
    </template>

  </van-card>

  <!-- 拼团列表 -->
  <van-list class="team">
    <div class="item" v-for="(item, key) in list" :key="key">
      <van-image width="50" height="50" round :src="item.businfo.avatar_text" fit="cover" />
      <div class="info">
        <div class="nickname" v-if="key == 0">{{ item.businfo.nickname }}(发起人)</div>
        <div class="nickname" v-else>{{ item.businfo.nickname }}</div>
        <div class="time">拼单时间：{{ item.createtime_text }}</div>
      </div>
    </div>
  </van-list>

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="danger" size="large">参与拼团</van-button>
    <van-button square hairline type="warning" size="large">发起拼团</van-button>
  </div>

</template>

<script setup>
import { getCurrentInstance, ref, onBeforeMount } from 'vue'

const { proxy } = getCurrentInstance();

let teamid = proxy.$route.query.teamid ? proxy.$route.query.teamid : 0
let team = ref({
  product: {},
  business: {}
})
let list = ref([])
let count = ref(50)
let time = ref(30 * 60 * 60 * 1000);
const gradientColor = {
  '0%': '#3fecff',
  '100%': '#6149f6',
};

onBeforeMount(() => {
  TeamInfo()
})

//跳转到商品详情界面
const toProductInfo = pid => proxy.$router.push({ path: '/product/info', query: { pid } })

const TeamInfo = async () => {
  var result = await proxy.$POST({
    url: '/team/info',
    params: { teamid: teamid }
  })

  if (result.code == 0) {
    proxy.$fail(result.msg)
    return false
  }

  console.log(result.data)

  team.value = result.data.team
  list.value = result.data.list

  //拼团进度
  var num = parseFloat(list.value.length / team.value.total).toFixed(2)
  count.value = num * 100

  //倒计时
  time.value = parseInt(team.value.endtime - team.value.createtime) * 1000
}

</script>


<style>
.van-circle__text {
  font-size: 20px;
}

.van-count-down {
  font-size: 20px;
}

.box {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  padding-left: 10px;
  margin-bottom: 10px;
}

.item .info {
  margin-left: 10px;
}

.item .info .nickname {
  font-size: 16px;
  font-weight: bold;
}

.item .info .time {
  font-size: 12px;
  font-weight: bold;
}

.actions {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
</style>


<style scoped>
:deep(.cart) {
  display: flex;
  width: 100%;
}

::v-deep .van-swipe-cell {
  width: 100%;
}

.delete-button {
  height: 100%;
}


.van-card {
  background-color: #fff;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 14px;
  font-weight: bold;
}
</style>